<template>
  <span>
    <q-list bordered class="bg-white no-shadow rounded-borders text-black">
      <q-item v-for="todo in todos" :key="todo.id">
        <q-item-section avatar>
          <q-checkbox :id="todo.id" v-model="todo.completed" color="primary" />
        </q-item-section>
        <q-item-section
          class="text-body1 text-wrap"
          :style="todo.completed ? { textDecoration: 'line-through' } : {}"
        >
          <q-item-label>{{ todo.todo }}</q-item-label>
          <q-item-label caption class="text-grey-8">{{
            todo.todo_描述
          }}</q-item-label>
        </q-item-section>
        <q-item-section side>
          <q-btn icon="chat" round flat></q-btn>
        </q-item-section>
      </q-item>
    </q-list>
  </span>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const todos = ref([
  {
    id: 1,
    completed: false,
    todo: '任务1',
    todo_描述: '任务1 描述',
  },
  {
    id: 2,
    completed: false,
    todo: '任务2',
    todo_描述: '任务2 描述',
  },
  {
    id: 3,
    completed: false,
    todo: '任务3',
    todo_描述: '任务3 描述',
  },
  {
    id: 4,
    completed: false,
    todo: '任务4',
    todo_描述: '任务4 描述',
  },
  {
    id: 5,
    completed: false,
    todo: '任务5',
    todo_描述: '任务5 描述',
  },
  {
    id: 6,
    completed: false,
    todo: '任务6',
    todo_描述: '任务6 描述',
  },
  {
    id: 7,
    completed: false,
    todo: '任务7',
    todo_描述: '任务7 描述',
  },
]);
</script>

<style scoped></style>
